.-work{
  background: rgb(75, 133, 160) url(../img/bg.png);
  .-content{
      color: #FFF;
      .-work-list{
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 10px;
        color: #000;
        flex-wrap: wrap;
        text-align: justify;
        .-work-item{
          box-shadow: 0 3px 10px rgba(0,0,0,.2);
          border-radius: 6px;
          padding: 20px;
          background: #fff;
          width: 47%;
          box-sizing: border-box;
          margin-bottom: 50px;
          transition: box-shadow .3s ease;
          &:hover{
            box-shadow: 0 8px 15px rgba(0,0,0,.2);
          }
          .-work-title{
            color: #4985A0;
            margin: 5px 0;
            font-size: 18px;
          }
          .-work-des{
            font-size: 16px;
            line-height: 22px;
          }
          .-work-des-en{
            font-size:14px;
          }
          .-work-link{
            width: 200px;
            height: 30px;
            border: 1px solid #E6E6E6;
            border-radius: 4px;
            cursor: pointer;
            opacity: .6;
            transition: all .3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
              height: 60%;
            }
            &:hover{
              opacity: 1;
              background: #E6E6E6;
            }
          }
        }
      }
      .-work-more{
        text-align: center;
        font-size: 18px;
        a{
          text-decoration:none;
          color: #FFF;
        }
      }
      .-work-switch{
        position: absolute;
        left: 5%;
        right: 5%;
        bottom: 10%;
        height:30px;
        z-index: 1;
        display: none;
        justify-content: space-between;
        .-left,.-right{
          border-radius: 50%;
          border: 1px solid #FFF;
          height: 30px;
          width: 30px;
          position: relative;
          background: url(../img/arrow.svg) no-repeat center 35%;
          background-size: 70%;
          transform: rotate(90deg);
        }
        .-left{
          transform: rotate(-90deg);
        }
      }

    }
}

@media screen and (max-width: 1366px) {
  .-work {
    .-content {
      top: 150px;
      .-work-list{
        max-width: 1200px;
        .-work-item{
          padding: 15px;
          margin-bottom: 20px;
        }
      }
    }
  }
}

@media screen and (max-width: 600px){
  .-work {
    .-content{
      top:80px;
      perspective: 2000px;
      .-work-list{
        transform-style: preserve-3d;
        width: 280px;
        height: 75%;
        overflow: visible;
        padding: 0;
        transition: transform 2s;
        .-work-item:nth-child(1){
          transform: translateZ(140px);
        }
        .-work-item:nth-child(2){
          transform: translateZ(-140px) rotateY(180deg);
        }
        .-work-item:nth-child(3){
          transform: translateX(-140px) rotateY(-90deg);
        }
        .-work-item:nth-child(4){
          transform: translateX(140px) rotateY(90deg);
        }
        .-work-item{
          width: 100%;
          height: 100%;
          position: absolute;
          background: rgba(255,255,255,0.95);
          border-radius:0;
          text-align: justify;
          .-work-title{
            text-align: center;
            font-size: 16px;
          }
          .-work-des{
            font-size: 12px;
          }
          .-work-link{
            margin: 0 auto;
          }
        }

      }
      .-work-more{
        margin-top: 15%;
        font-size: 16px;
      }
      .-work-switch{
        display: flex;
      }
    }
  }
  .-title{
    display: none;
  }
}